<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
				content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>全国青少年电子信息智能创新大赛</title>
	<link rel="stylesheet" href="./css/join.css">
	<link rel="stylesheet" href="./lib/layui/css/layui.css">
	<link rel="stylesheet" href="./lib/layui/css/modules/layer/default/layer.css">
</head>
<body>
<section class="wrapper" v-cloak>
	<section class="top" style="background-image: url(./images/login-bg.png)">
		<img src="./images/login-logo-text.png" alt="">
		<img src="./images/login-logo.png" alt="">
	</section>
	<form class="login-content layui-form" @submit.prevent>
		<section class="label">
			<img src="./images/login-user.png" alt="">
			<input v-model="phone" name="phone" lay-verify="phone" type="text" placeholder="手机号">
		</section>
		<section class="label">
			<input lay-verify="required" name="code" type="text" placeholder="验证码">
			<span class="get-code" @click="getCode">{{ seconds ? seconds + 's' : '获取验证码'}}</span>
		</section>
		<button lay-submit="" lay-filter="login" class="login-btn">
			确认参赛
		</button>
	</form>
	<transition name="fade">
		<section class="modal" v-if="showModal">
			<section class="modal-content" style="width: 8.533rem">
				<section class="title">
					{{ title }}
					<img class="close-icon" @click="showModal = false" src="./images/icons/close-icon.png" alt="">
				</section>
				<section class="content">
					{{ '' }}
				</section>
				<section class="modal-footer">
					<a class="btn" href="javascript:;" @click="showModal = false">知道了</a>
				</section>
			</section>
		</section>
	</transition>
</section>
<script src="./js/flexible.js"></script>
<script src="./js/jquery.min.js"></script>
<script src="../js/abkj/fun_tool.js"></script>
<script src="./lib/layui/layui.js"></script>
<script src="../js/abkj/slAjax.js"></script>
<script src="./js/vue.min.js"></script>
<script src="./js/common.js"></script>
<script src="../js/abkj/ext/vode.js"></script>
<script src="../js/abkj/ext/login.js"></script>
<script src="../js/abkj/ext/signExt.js"></script>
<script>
	$(function () {
		var tool = fun_tool()
		var userInfo = tool.getUserInfo()
		new Vue({
			el: '.wrapper',
			data: () => ({
				form: null,
				timer: null,
				seconds: 0,
				userInfo: userInfo,
				loginByPhone: true,
				showModal: false,
				phone: '',
				title: '请登录电子学会比赛平台进行注册，并确认参赛',
				password: '',
				verifyCode: '',
				join: false,
			}),
			watch: {
				loginByPhone: function () {
					$('[name=password], [name=code]').val('')
				},
				showModal: function (val) {
					if (!val && this.join) {
						window.close()
						this.$el.style.display = 'none'
					}
				}
			},
			mounted: function () {
				var vm = this
				joinTeam(tool.getUrlParam('id'), function (data) {
					vm.showModal = true
					vm.title = '参赛成功，您可以通过电子学会微信小程序或者登录电子学会比赛平台实时查询参赛进度。'
					vm.join = true
				}, function (err, msg) {
					vm.showModal = true
					vm.title = msg
				})
				layui.use(['form', 'layer'], function () {
					vm.form = layui.form
					vm.form.on('submit(login)', function (data) {

						userSMSLogin({
							prjName: 'MATCH',
							userName: data.field.phone,
							verCode: data.field.code
						}, function (data) {
							// alert("cuowu")
							// alert(JSON.stringify(data))
							tool.setToken(data.token)
							tool.setObject('userInfo', data.userInfo)
							tool.setUserInfo(data.userInfo)
							joinTeam(tool.getUrlParam('id'), function (data) {
								vm.showModal = true
								vm.title = '参赛成功，您可以通过电子学会微信小程序或者登录电子学会比赛平台实时查询参赛进度。'
								vm.join = true
							}, function (err, msg) {

								vm.showModal = true
								vm.title = msg
								vm.join = true
							})
						}, function (data) {
							
							// alert(JSON.stringify(data))
							vm.showModal = true
						})
					})
				})
			},
			methods: {
				// login() {
				//   this.showModal = true
				// },
				getCode: function () {
					var vm = this
					if (this.phone.length==0) return layer.msg('请输入正确的手机号', {icon: 5})
					if (this.timer) return
					getSMSVCode(this.phone, function () {
						vm.seconds = 60
						vm.timer = setInterval(() => {
							vm.seconds --
							if (vm.seconds === 0) {
								clearInterval(vm.timer)
								vm.timer = null
							}
						}, 1000)
					}, function () {

					})
				}
			}
		})
	})
</script>
</body>
</html>
